<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var selects = document.getElementsByTagName("select");//通过标签名获取select对象
            var date = new Date();
            var nowYear = date.getFullYear();//获取当前的年
            for (var i = nowYear; i >= nowYear - 100; i--) {
                var optionYear = document.createElement("option");
                optionYear.innerHTML = i;
                optionYear.value = i;
                selects[0].appendChild(optionYear);
            }

            for (var i = 1; i <= 12; i++) {
                var optionMonth = document.createElement("option");
                optionMonth.innerHTML = i;
                optionMonth.value = i;
                selects[1].appendChild(optionMonth);
            }

            getDays(selects[1].value, selects[0].value, selects);

            // 初始化change事件监听
            [selects[0], selects[1]].forEach(function (item) {
                item.addEventListener('change', setDays)
            })
        }

        // 获取某年某月存在多少天
        function getDaysInMonth(month, year) {
            var days;
            if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
                days = 31;
            } else if (month == 4 || month == 6 || month == 9 || month == 11) {
                days = 30;
            } else {
                // 判断是否为润二月
                if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
                    days = 29;
                } else {
                    days = 28;
                }
            }
            return days;
        }

        function setDays() {
            var selects = document.getElementsByTagName("select");
            var year = selects[0].options[selects[0].selectedIndex].value;
            var month = selects[1].options[selects[1].selectedIndex].value;
            getDays(month, year, selects);
        }

        function getDays(month, year, selects) {
            var days = getDaysInMonth(month, year);

            selects[2].options.length = 0;

            for (var i = 1; i <= days; i++) {
                var optionDay = document.createElement("option");
                optionDay.innerHTML = i;
                optionDay.value = i;
                selects[2].appendChild(optionDay);
            }
        }
    </script>
</head>
<body>
<a href="/e/user/index">返回首页</a>
<h2>流水查询</h2>
<form action="/e/flow/getFlowByT" method="get">
    <span>
    交易时间：
    <div class="date1">
        <select name="tradeTime"></select>
        <span>年</span>
        <select name="tradeTime"></select>
        <span>月</span>
        <select name="tradeTime"></select>
        <span>日</span>
    </div></span>
    <br>
    交易类型：
    <select name="tradeType">
        <option selected value="5">全部</option>
        <option value="4">提现</option>
        <option value="3">转账</option>
        <option value="1">充值</option>
    </select><br><br>
    <input type="submit" value="查询">
</form>
<div align="center">
    <table border="2px">
        <thead>
        <tr>
            <th>流水号</th>
            <th>账号</th>
            <th>电子账户</th>
            <th>付款人姓名</th>
            <th>付款人标识</th>
            <th>交易金额</th>
            <th>交易类型</th>
            <th>交易时间</th>
            <th>收款人姓名</th>
            <th>收款人标识</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="flow:${flows}">
            <td th:text="${flow.getFId()}"></td>
            <td th:text="${flow.account}"></td>
            <td th:text="${flow.getEId()}"></td>
            <td th:text="${flow.getIName()}"></td>
            <td th:text="${flow.getIId()}"></td>
            <td th:text="${flow.tradeMoney}"></td>
            <td th:if="${flow.getTradeType()==1}">充值</td>
            <td th:if="${flow.getTradeType()==3}">转账</td>
            <td th:if="${flow.getTradeType()==4}">提现</td>
            <td th:if="${flow.getTradeType()>4||flow.getTradeType()<1}">未知</td>
            <td th:text="${flow.tradeTime}"></td>
            <td th:text="${flow.getTName()}"></td>
            <td th:text="${flow.getTId()}"></td>
        </tr>
        </tbody>
    </table>
</div>

</body>
</html>